<!--
 * @@Descripttion:
 * @Author: wangru
 * @Date: 2023-10-27 09:46:18
 * @LastEditors: wangru
 * @LastEditTime: 2023-11-06 16:01:32
-->
<template>
	<div class="authorization">
		<div class="header">
			<div class="left">
				<img src="../../assets/img/authorization.png" alt="" />
				<span class="title">我的授权</span>
			</div>
			<a-button @click="readAll">刷新</a-button>
		</div>
		<div>
			<div v-if="list && list.length > 0">
				<div class="content" v-for="(item, index) in list" :key="index">
					<div class="left">
						<!-- <img src="../../assets/img/lock-service.png" alt="" /> -->
						<icon-font
							type="icon-jiamisuofuwuqi"
							class="icon-font iconFont"
						></icon-font>
						<div class="detail">
							<!-- <span>加密锁服务器</span> -->
							<div class="desc">
								<!-- <span>服务器地址： localhost:20002</span> -->
								<span>加密锁序列号：{{ item.serial }}</span>
							</div>
						</div>
					</div>
					<a-button type="primary" @click="toPay(item.serial)"
						>查看已购</a-button
					>
				</div>
			</div>
			<div v-if="list && list.length === 0" class="noData">
				<img src="../../assets/img/noData.png" alt="暂无数据" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { requestHttp } from '@/api/main.js';
import { useRouter } from 'vue-router';
const router = useRouter();
let list = ref();
let readAll = () => {
	requestHttp('controller.manager.readAll').then((res) => {
		console.log('获取刷新数据', res);
		list.value = res.data;
	});
};
let toPay = (id) => {
	console.log('-------------', id);
	router.push({ path: '/lock/serve-list/' + id });
};
onMounted(() => {
	readAll();
});
</script>

<style lang="scss" scoped>
.authorization {
	background: #f7f7f7;
	height: calc(100vh - 50px);
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120px;
		padding: 0 32px 0 60px;
		background: url('../../assets/img/user-bg.png');
		.title {
			font-size: 30px;
			color: #ffffff;
			margin-left: 14px;
		}
		.ant-btn {
			background: transparent;
			color: #ffffff;
		}
	}
	.content {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		background: #ffffff;
		padding: 0 32px 0 60px;
		height: 78px;
		.left {
			display: flex;
			align-items: center;
			.detail {
				margin-left: 32px;
				font-size: 14px;
				color: #333333;
			}
			.desc {
				span {
					margin-right: 30px;
					font-size: 14px;
				}
				span:nth-last-of-type(1) {
					margin-right: 0;
				}
			}
		}
		.iconFont {
			font-size: 40px;
		}
	}
	.noData img {
		vertical-align: middle;
		border-style: none;
		margin: auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -25%);
	}
}
</style>
